<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>嵌入详情和变更记录的div</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<style>
	
 	.tab_div{margin:0;padding:0;width:100%;height:100%;display:none;}
	.tab{margin:0;padding:0;list-style:none;width:100%;background:#6d6e72;overflow:hidden;}
	.on{display:block;}
	
	.tab li{float:left;width:70px;height:35px;background:#6d6e72;color:#fff; text-align:center;line-height:35px;cursor:pointer; }
	.on{display:block;}
	.tab li.cur{
		background:white;
		color:#00aa98;
	}
	.closeBtn{
		position:relative;
		top:10px;
		right:20px;
		float:right;
		font-size:12px;
		margin-left:20px;
		cursor:pointer;
		width:16px;
		height:16px;
		background:url(../layer-v2.4/layer/skin/default/icon.png) no-repeat;
		background-position: 0 -40px;
	}
	</style>
	<body>
		<ul class="tab">
       		<li class="cur orderDetail">订单详情</li>
       		<li class="orderChangeOrder">变更记录</li>
       		<span class='closeBtn'></span>
 		</ul>
 	<div  class="on tab_div" id="orderDetail">
 	</div>
 	<div class="tab_div" id="changeRecord"></div>
	</body>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>		
			<!-- 引入my97日期时间控件 -->
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>	
		<script type="text/javascript" src="../js/common.js" ></script>
		<script>	
		$("#orderDetail").load('orderDetail.html')
		/*订单详情与变更记录实现tab切换*/
		$(".tab li").click(function(){
	        $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
			$(".tab_div").hide().eq($(this).index()).show();
	     });
		
		$(".orderChangeOrder").click(function(){
			$("#changeRecord").load('orderChangeOrder.html');
		})
		$(".closeBtn").click(function(){
			closeWin()
		})
		
		</script>		
</html>
